<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>数据后台管理系统->员工管理</title>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <meta name="description" content="描述内容...">
  <meta name="keywords" content="关键词...">
  <link rel="shortcut icon" href="../images/system.ico">

  <!--  css-->
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../css/main-rights.css">
<!--  js-->
  <script src="../js/jq/jquery_3.6_min.js"></script>
  <script src="../js/vue/axios-0.18.0.js"></script>
  <script src="../js/vue/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>

</head>
<body>
<div id="app">
  <!--顶部-->
  <header class="el-header">
  <!--  logo-->
    <div class="logo">
      <a href="../index.html" class="text_underline">
        <h2 class="text-success logo-h">{{sysTitle}}</h2>
      </a>
    </div>

  <!--  导航-->
    <div class="header-nav">
      <ul class="h-nav">
        <li>
          <a href="../index.html" > 首页</a>
        </li>
        <li>
          <a href="#"> 系统管理 <span class="li-font1"></span></a>
          <ul class="nav-sub">
            <li v-for="item in subList1"><a :href="item.href">{{item.li}}</a></li>
          </ul>
        </li>
        <li>
          <a href="#"> 个人管理 <span class="li-font2"></span></a>
          <ul class="nav-sub">
            <li v-for="item in subList2"><a :href="item.href">{{item.li}}</a></li>
          </ul>
        </li>
        <li>
          <a href="#"> 关于</a>
        </li>
      </ul>
    </div>

    <!--    用户类型及部门-->
    <div class="userTypeAndDepart">
      <p class="userFont">{{userDepartment}}&nbsp;&nbsp;{{userClass}}</p>
    </div>
  </header>

   <!--主部-->
  <div class="el-main">
    <!--  左边-->
    <div class="main-left">
      <!--    头像-->
      <div class="left-head-photo">
        <img :src="userImageSrc" alt="头像">
        <i class="i-lh1"><span class="photo-state"></span>{{userID}}</i>
        <i class="i-lh2">{{userName}}</i>
      </div>

      <!--    菜单-->
      <div class="left-menu">菜单</div>

      <!--    树导航-->
      <div>
        <ul class="left-nav">
          <li>
            <a href="#"> 系统管理 <span class="left-li-font1"></span></a>
            <ul class="left-nav-sub">
              <li v-for="item in subList1"><a :href="item.href">{{item.li}}</a></li>
            </ul>
          </li>

          <li class="li-m li-margin">
            <a href="#"> 个人管理 <span class="left-li-font2"></span></a>
            <ul class="left-nav-sub">
              <li v-for="item in subList2"><a :href="item.href">{{item.li}}</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <!--  右边-->
    <div class="main-right">
      <div class="content-header">
        <span class="title">员工管理</span>
      </div>
      <div class="app-container">
        <div class="box">
          <div class="filter-container">
            <el-select v-model="pagination.selectDepartment" placeholder="部门名称" @change="getAll()"  style="width: 150px;">
              <el-option v-for="item in departments" :label="item.name"  :value="item.id"></el-option>
              <el-option label="所有部门"  value=""></el-option>
            </el-select>
            <el-input placeholder="员工编号" v-model="pagination.id" style="width: 150px;" class="filter-item"></el-input>
            <el-input placeholder="员工姓名" v-model="pagination.name" style="width: 150px;" class="filter-item"></el-input>
            </el-select>
            <el-button @click="getAll()" class="dalfBut">查询</el-button>
            <el-button type="primary" @click="handleCreate()">新建</el-button>
          </div>
          <el-table size="small" class="border-top" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column prop="id" label="编号" align="center"></el-table-column>
            <el-table-column prop="password" label="密码" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="manger" label="部门主管" align="center"></el-table-column>
            <el-table-column prop="did" label="所属部门" align="center"></el-table-column>
            <el-table-column prop="time" label="注册时间" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>



          <!--分页组件-->
          <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
          </div>

          <!-- 新增标签弹层 -->
          <div class="add-form">
            <el-dialog title="新增员工" :visible.sync="dialogFormVisible">
              <el-form ref="dataAddForm" :model="formDataAdd" :rules="rules" label-position="right" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="员工编号" prop="id">
                      <el-input v-model="formDataAdd.id"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="员工密码" prop="password">
                      <el-input v-model="formDataAdd.password"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="员工名字" prop="name">
                      <el-input v-model="formDataAdd.name"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="注册时间" prop="time">
                      <el-input v-model="formDataAdd.time" type="date"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属部门" prop="did">
                      <el-select v-model="formDataAdd.did" placeholder="请选择所属部门">
                        <el-option v-for="item in departments" :label="item.name+item.id"  :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="员工电话" prop="tell">
                      <el-input v-model="formDataAdd.tell"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="部门主管" prop="manger">
                      <el-select v-model="formDataAdd.manger" placeholder="是否为部门主管">
                        <el-option label="否" value="否"></el-option>
                        <el-option label="是" value="是"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <img :src="employeeHeadPhoto" style="margin: -10px 0 0 106px;width: 100px; height: 100px;"></img>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="handleAdd()">添加</el-button>
              </div>
            </el-dialog>
          </div>

          <!-- 编辑标签弹层 -->
          <div class="add-form">
            <el-dialog title="修改员工" :visible.sync="dialogFormVisible4Edit">
              <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="员工名字" prop="name">
                      <el-input v-model="formData.name"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="员工密码" prop="password">
                      <el-input v-model="formData.password"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="所属部门" prop="did">
                      <el-select v-model="formData.did" placeholder="请选择所属部门">
                        <el-option v-for="item in departments" :label="item.name+item.id"  :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="员工电话" prop="tell">
                      <el-input v-model="formData.tell"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="部门主管" prop="manger">
                      <el-select v-model="formData.manger" placeholder="是否为部门主管">
                        <el-option label="否" value="否"></el-option>
                        <el-option label="是" value="是"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <img :src="employeeHeadPhoto" style="margin: -10px 0 0 106px; width: 100px; height: 100px;"></img>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="handleEdit()">修改</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<!--vue-->
<script src="../js/vue/pages/vue-employees.js"></script>
<script src="../js/common.js"></script>
</html>